<template>
  <text 
    class="fu-icon"
    :class="[
      name && `icon-${name}`,
      { 'fu-icon--spin': spin }
    ]"
    :style="{
      color: color,
      fontSize: size ? `${size}rpx` : ''
    }"
    @click="onClick"
  >
    <slot></slot>
  </text>
</template>

<script>
/**
 * fu-icon 图标组件
 * @description 用于展示图标
 * @property {String} name - 图标名称
 * @property {String} color - 图标颜色
 * @property {Number} size - 图标大小,单位rpx
 * @property {Boolean} spin - 是否旋转
 * @event {Function} click - 点击图标时触发
 */
export default {
  name: 'fu-icon',
  props: {
    // 图标名称
    name: {
      type: String,
      default: ''
    },
    // 图标颜色
    color: {
      type: String,
      default: ''
    },
    // 图标大小
    size: {
      type: [String, Number],
      default: ''
    },
    // 是否旋转
    spin: {
      type: Boolean,
      default: false
    }
  },
  emits: ['click'],
  methods: {
    onClick(e) {
      this.$emit('click', e)
    }
  }
}
</script>

<style lang="scss" scoped>
// @import "../../styles/iconfont.scss";
@import "https://at.alicdn.com/t/c/font_4810997_oypb58tmjjm.css";
.fu-icon {
  font-family: 'fu-icon';
  font-style: normal;
  
  &--spin {
    animation: fu-rotate 1s linear infinite;
  }
}

@keyframes fu-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style> 